<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./js/axios.min.js"></script>
    <script src="./js/api.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.9.1/jquery.js"></script>

    <script src="https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>
  </head>
  <body>
    <input type="text" name="" id="ipt" />
    <button onclick="searchFn()">搜索</button>
    <button onclick="randomFn()">随机</button>
    <button onclick="priceAsc()">单价升序排序</button>
    <button onclick="priceDesc()">单价降序排序</button>
    <button onclick="idAsc()">id升序</button>
    <button>id降序</button>
    <p>百<strong>米</strong></p>
    <p>百米</p>

    <ul>
      <!-- <li>
        <h2>小米</h2>
        <p></p>
        <img src="" alt="" />
      </li> -->
    </ul>
    <script>
      let productArr = null;
      function priceDesc() {
        //对produtcArr 排序  重新根据数组 生成 列表
        productArr.sort((a, b) => b.pprice - a.pprice);
        console.log(productArr);
        let resArr = productArr.map(
          (pObj) => `
          <li>
            <a href="item.html?pid=${pObj.pid}">
              <h2>${pObj.pname}</h2>
              <p>${pObj.pprice}</p>
              <img src="${pObj.pimg}" alt="" />
            </a>
          </li>
        `
        );
        console.log(resArr);
        // let ul = document.querySelector("ul");
        // ul.innerHTML = resArr.join("");
        $("ul").html(resArr.join(""));
      }
      function priceAsc() {
        //对produtcArr 排序  重新根据数组 生成 列表
        productArr.sort((a, b) => a.pprice - b.pprice);
        console.log(productArr);
        let resArr = productArr.map(
          (pObj) => `
          <li>
            <a href="item.html?pid=${pObj.pid}">
              <h2>${pObj.pname}</h2>
              <p>${pObj.pprice}</p>
              <img src="${pObj.pimg}" alt="" />
            </a>
          </li>
        `
        );
        console.log(resArr);
        $("ul").html(resArr.join(""));
      }
      function idAsc() {
        //对produtcArr 排序  重新根据数组 生成 列表
        productArr.sort((a, b) => a.pid - b.pid);
        console.log(productArr);
        let resArr = productArr.map(
          (pObj) => `
          <li>
            <a href="item.html?pid=${pObj.pid}">
              <h2>${pObj.pname}</h2>
              <p>${pObj.pprice}</p>
              <img src="${pObj.pimg}" alt="" />
            </a>
          </li>
        `
        );
        console.log(resArr);
        $("ul").html(resArr.join(""));
      }
      function searchFn() {
        let ipt = document.querySelector("#ipt");
        let str = ipt.value;
        if (str == "") {
          alert("搜索内容不能为空");
          return;
        }
        //找数组中 pname属性 包含 str 字符串  的对象
        productArr;

        // res 搜索结果
        let searchArr = productArr.filter((v) => v.pname.indexOf(str) != -1);

        let resArr2 = searchArr.map(
          (pObj) => `
          <li>
            <a href="item.html?pid=${pObj.pid}">
              <span>${pObj.pname}</span>

              <p>${pObj.pprice}</p>
              <img src="${pObj.pimg}" alt="" />
            </a>
          </li>
        `
        );
        // let ul = document.querySelector("ul");
        // let html = resArr2.join("");
        // 拼字符串 替换
        html = html.replaceAll(str, `<strong>${str}</strong>`);
        console.log(html);

        // ul.innerHTML = html;

        $("ul").html(resArr2.join(""));
      }

      function randomFn() {
        // productArr; //[{n:Math.random()},{},{}]
        // productArr.forEach((obj) => {
        //   obj.n = Math.random();
        // });
        // productArr.sort((a, b) => b.pid - a.pid);

        productArr = _.sampleSize(productArr, productArr.length);

        console.log(productArr);
        let resArr = productArr.map(
          (pObj) => `
          <li>
            <a href="item.html?pid=${pObj.pid}">
              <h2>${pObj.pname}</h2>
              <p>${pObj.pprice}</p>
              <img src="${pObj.pimg}" alt="" />
            </a>
          </li>
        `
        );
        console.log(resArr);
        // let ul = document.querySelector("ul");
        // ul.innerHTML = resArr.join("");
        $("ul").html(resArr.join(""));
      }
      loadList();

      // 显示商品列表
      // 2-请求首页列表接口-》服务器返回的数据 -》 ul
      async function loadList() {
        // proudtListAPI
        //         参数
        // pagesize  每页获取几个数据
        // pagenum 获取第几页数据
        // uid  用户id
        let pagesize = 20;
        let pagenum = 0;
        let uid = localStorage.getItem("uid");
        let params = { pagenum, pagesize, uid };
        let { data } = await axios.get(proudtListAPI, { params });
        console.log(data);
        productArr = data.data;
        console.log(productArr); //-> li
        let resArr = productArr.map(
          (pObj) => `
          <li>
            <a href="item.html?pid=${pObj.pid}">
              <span>${pObj.pname}</span>
              <p>${pObj.pprice}</p>
              <img src="${pObj.pimg}" alt="" />
            </a>
          </li>
        `
        );
        console.log(resArr);
        // let ul = document.querySelector("ul");
        // ul.innerHTML = resArr.join("");

        $("ul").html(resArr.join(""));
      }
    </script>
  </body>
</html>
